import React, { Suspense } from 'react'
import { useRoutes, Link } from 'react-router-dom'
import routes from '@/router'
import { useAppSelector, useAppDispatch, shallowEqualApp } from './store'
import {
  setMessage,
  increment,
  decrement,
  incrementByAmount
} from './store/modules/counter'
import Demo2 from './views/demo/template'

function App() {
  const { value, message } = useAppSelector(
    (state) => ({
      value: state.counter.value,
      message: state.counter.message
    }),
    shallowEqualApp
  )

  const dispatch = useAppDispatch()

  const handleChangeMessage = () => {
    dispatch(setMessage('hello world !!!'))
  }

  return (
    <div className="App">
      <div className="nav">
        <Link to={'/discover'}>发现音乐</Link>
        <Link to={'/mine'}>我的音乐</Link>
        <Link to={'/focus'}>关注</Link>
        <Link to={'/download'}>下载客户端</Link>
      </div>
      <Demo2 name="demo2" />
      <hr />
      <h2>counter-{value}</h2>
      <h3>msg: {message}</h3>
      <div>
        <button onClick={() => dispatch(increment())}>+</button>
        <button onClick={() => dispatch(decrement())}>-</button>
        <button onClick={() => dispatch(incrementByAmount(10))}>加10</button>
        <button onClick={handleChangeMessage}>修改数据</button>
        <button>修改信息</button>
      </div>
      <Suspense fallback={<div>loading...</div>}>
        <div>{useRoutes(routes)}</div>
      </Suspense>
    </div>
  )
}

export default App
